<script setup name="MenuItem">
import * as ICON from "@element-plus/icons-vue";

import layoutVerticalMenuHeader from "../layout-vertical-menu-header/index.vue";
import layoutVerticalMenuLink from "../layout-vertical-menu-link/index.vue";

defineComponent({
	components: {
		layoutVerticalMenuHeader,
		layoutVerticalMenuLink,
		...ICON
	}
});

defineProps({
	items: {
		type: Object,
		required: true
	}
});

// case uuid
function uuid() {
	return Math.random().toString(36).substring(2) + Date.now().toString(36);
}
</script>

<style scoped></style>

<template>
	<template v-for="item in items" :key="item">
		<el-sub-menu v-if="item?.children && item?.children?.length > 0 && !item.header" :key="uuid()" :index="item?.route" class="el-menu-item-vertical-has-child">
			<template #title>
				<el-icon class="menu-icon">
					<component :is="ICON[item?.icon]" v-if="item.icon" />
					<svg-icon name="wenhao" v-else></svg-icon>
				</el-icon>
				<span>{{ item?.title }}</span>
			</template>

			<MenuItem :items="item.children"> </MenuItem>
		</el-sub-menu>

		<layoutVerticalMenuHeader v-else-if="item?.header && !item.route" :keys="uuid()" :item="item" :icon="item.icon || undefined" />

		<el-menu-item v-else-if="item?.route" :to="item?.route" :key="uuid()" :route="{ name: item.route }" :index="item.route" class="el-menu-item-vertical-no-child">
			<el-icon class="menu-icon">
				<component :is="ICON[item?.icon]" v-if="ICON[item.icon]" />
				<svg-icon name="wenhao" v-else></svg-icon>
			</el-icon>
			<template #title>{{ item?.title || item.header }}</template>
		</el-menu-item>
	</template>
</template>
